<template>
  <div>
    <van-nav-bar class="navbar" fixed>
      <router-link to="/" slot="left" class="back"
        ><img src="http://qxkmdhmin.hn-bkt.clouddn.com/back.png"
      /></router-link>
      <input
        class="search"
        type="text"
        slot="title"
        placeholder="搜索菜谱、食材"
      />
      <div class="sousuo" slot="right">搜索</div>
    </van-nav-bar>
  </div>
</template>
<script>
export default {
  methods: {},
};
</script>
<style lang="scss" scoped>
.navbar {
  .search {
    border-radius: 8px;
    border: none;
    background: #cccccc2e url("http://qxkmdhmin.hn-bkt.clouddn.com/sousuo.png")
      2px 10px no-repeat;
    text-indent: 2em;
    height: 35px;
    font-size: 15px;
  }
  .back {
    position: absolute;
    left: 20px;
  }
  .sousuo {
    font-size: 18px;
    color: red;
  }
}
</style>